<!-- App检测更新组件 -->
<template>
	<van-overlay :show="show">
		<div class="update-container">
			<div class="top"></div>
			<div class="content">
				<p class="f18 tc gray-2">{{$t('发现新版本')}}</p>
				<p class="mt15 f12 tc gray-2">{{$t('更新版本号')}} V{{latestVersion}}</p>
				<div class="log gray-3" v-html="updateIntro"></div>
			</div>
			<div class="bottom">
				<van-button type="default" round @click="show=false">{{$t('取消')}}</van-button>
				<van-button type="primary" round @click="update">{{$t('立即更新')}}</van-button>
			</div>
		</div>
	</van-overlay>
</template>

<script>
import{useStore}from'vuex'
import {openURL, getPhonePlatform} from '@/utils'
import {useMapState, useComputed } from '@/utils/vuexm'
import {SUCCESS} from '@/api'
import { computed, ref } from 'vue'
import {Toast} from 'vant'

export default {
	setup(params, ctx){
		const store = useStore()
		const show = ref(false)
		const platform = getPhonePlatform() =='ios'?'apple':'android'
		const {version, sysParams, lang} = useComputed(useMapState('user',['version', 'sysParams', 'lang']))
		const url = computed(()=>{
			return sysParams.value[`${platform}Url`] || ''
		})
		const latestVersion = computed(()=>{
			return sysParams.value[`${platform}Version`]
		})
		const updateIntro = computed(()=>{
			let _lang = lang.value=='zh-CN'?'zh':(lang.value=='zh-TW'?'cht':'en')
			let _intro = sysParams.value[`${platform}UpdateIntro`]
			_intro = JSON.parse( _intro || '{}')
			return _intro[_lang]
		})
		const prompt = computed(()=>{
			let _prompt = sysParams.value[`${platform}PromptUpdate`]
            return _prompt==1 || false
		})

		function getLatestVersion(showLoading = false){
			return new Promise(resolve=>{
				if(!window.isApp){
					resolve(false)
					return
				}
				//检测全量版本更新
				store.dispatch('user/getSysParams',showLoading).then(res=>{
					if(res.rst == SUCCESS){
						setTimeout(()=>{
							if(prompt.value && latestVersion.value > version.value){
								show.value = true
								resolve(true)
							} else {
								resolve(false)
							}
						}, 0)
					}
				})
			})
		}

		function update(){
			if(platform=='android'){
				if(window['AppUpdate'] && url.value.endsWith('.apk')){
					window.AppUpdate.downloadAndInstallApk(msg=>{
						Toast.success(msg)
					}, msg=>{
						Toast.fail(msg)
					}, url.value)
				} else {
					openURL(url.value)
				}
			} else if (platform=="apple"){
				if(/\.apple$/.test(url.value)){
					location.href="itms-services://?action=download-manifest&url="+url.value
				} else {
					openURL(url.value)
				}
			} else {
				openURL(url.value)
			}
			show.value = false
		}

		setTimeout(getLatestVersion, 5000)

		return {
			show,
			latestVersion,
			updateIntro,
			update
		}
	}
}
</script>

<style lang="less" scoped="">
.update-container {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 3rem;
	background-color: #FFF;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	overflow: hidden;
	.top {
		height: 1.16rem;
		background: url('../assets/img/updata_bg.png') no-repeat center top;
		background-size:100% auto;
	}
	.bottom {
		padding-top:0.2rem;
		padding-bottom: 0.45rem;
		padding-left:0.36rem;
		padding-right:0.36rem;
		display: flex;
		justify-content: space-between;
		:deep(button) {min-width: 100px;}
	}
	.content {
		padding-left:0.36rem;
		padding-right:0.36rem;
		margin-top: 0.1rem;
		.log {
			margin-top: 0.1rem;
			line-height: 0.24rem;
			max-height: calc(100vh - 3.62rem);
			overflow-y: auto;
		}
	}
}
</style>
